<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Baidu Maps</title>
    <style>
      html {
        height: 100%;
      }
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #fff;
      }
      #search_box {
        position: fixed;
        top: 5px;
        right: 5px;
        z-index: 9999;
      }
      #search_box input {
        -webkit-appearance: none;
        border-radius: 3px;
        box-sizing: border-box;
        outline: 0;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
      }
      #search_box input[type="text"] {
        background-color: #fff;
        border: 1px solid #ccc;
        color: #000;
        width: 180px;
        padding: 5px;
        font-size: 16px;
        opacity: 0.7;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
      }
      #search_box input[type="button"] {
        margin-left: 5px;
        background-color: #207ab7;
        border: 1px solid #207ab7;
        color: #fff;
        padding: 4px 6px;
        font-size: 14px;
      }
    </style>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=3.0&ak=f3dpTRaX3k6Syuq3tFPd6pXwB57KaHmT"
    ></script>
    <script>
      var editor = parent.tinymce.activeEditor;
      function insCnt(txt) {
        editor.insertContent(txt);
        parent.tinymce.activeEditor.windowManager.close();
      }

      var map, geocoder;
      var lng, lat;
      function initialize() {
        map = new BMap.Map("map_canvas");
        var point = new BMap.Point(116.331398, 39.897445);
        map.centerAndZoom(point, 14);
        map.addControl(new BMap.NavigationControl());
        //map.enableScrollWheelZoom();

        //根据IP定位
        var myCity = new BMap.LocalCity();
        myCity.get(function (result) {
          map.setCenter(result.name);
        });

        var gc = new BMap.Geocoder();
        gc.getLocation(point, function (rs) {
          var addComp = rs.addressComponents;
          var address = [addComp.city].join("");
          //console.log(address);
        });

        map.addEventListener("click", function (e) {
          //alert(e.point.lng + "," + e.point.lat);
          lng = e.point.lng;
          lat = e.point.lat;
          var marker = new BMap.Marker(
            new BMap.Point(e.point.lng, e.point.lat)
          );
          map.clearOverlays();
          map.addOverlay(marker);
          //insCnt(lng+','+lat);
          parent.tinymceLng = lng;
          parent.tinymceLat = lat;
        });

        document
          .getElementById("kw")
          .addEventListener("keypress", function (e) {
            if (e.keyCode == "13") {
              e.preventDefault();
              searchByStationName();
            }
          });
      }

      function searchByStationName() {
        var localSearch = new BMap.LocalSearch(map);
        //localSearch.enableAutoViewport(); //允许自动调节窗体大小
        map.clearOverlays(); //清空原来的标注
        var keyword = document.getElementById("kw").value;
        localSearch.setSearchCompleteCallback(function (searchResult) {
          console.log(searchResult);
          if (searchResult.Cr.length == 0) {
            alert("搜索不到该地区");
            return false;
          }
          var poi = searchResult.Cr[0];
          map.centerAndZoom(poi.point, 14);
          var marker = new BMap.Marker(
            new BMap.Point(poi.point.lng, poi.point.lat)
          );
          parent.tinymceLng = poi.point.lng;
          parent.tinymceLat = poi.point.lat;
          map.addOverlay(marker);
        });
        localSearch.search(keyword);
        return false;
      }
    </script>
  </head>
  <body onload="initialize();">
    <div id="search_box">
      <input
        id="kw"
        type="text"
        value=""
        autocomplete="off"
        placeholder="输入要搜索的地点"
      /><input type="button" value="搜索" onclick="searchByStationName()" />
    </div>
    <div id="map_canvas" style="width: 100%; height: 100%"></div>
  </body>
</html>
